<template>
  <div class="dataStatistics">
    <User :userAds="titleAdsText" />
    <div class="statisticsCon">
      <!-- 左边内容 -->
      <div class="leftCon">
        <CommonTitle titleText="预警核验情况" />
        <div class="dateBox">
          <div class="chooseDate" v-if="curDateType == 1">
            <Date-picker type="month" placeholder="选择月" style="width: 90px" @on-change="handleChange" />至
            <Date-picker type="month" placeholder="选择月" style="width: 90px" @on-change="handleChange" />
          </div>
          <div class="chooseDate" v-if="curDateType == 2">
            <Date-picker type="year" placeholder="选择年" style="width: 90px" @on-change="handleChange" />至
            <Date-picker type="year" placeholder="选择年" style="width: 90px" @on-change="handleChange" />
          </div>
          <DatePicker
            :value="value1"
            v-if="curDateType == 0"
            format="yyyy-MM-dd"
            type="daterange"
            placeholder="选择日期"
            style="width: 200px"
            @on-change="handleChange"
          />
          <div class="tabDate">
            <div :class="curDateType == 0 ? 'cur' : ''" @click="changeType(0)">
              日
            </div>
            <div :class="curDateType == 1 ? 'cur' : ''" @click="changeType(1)">
              月
            </div>
            <div :class="curDateType == 2 ? 'cur' : ''" @click="changeType(2)">
              年
            </div>
          </div>
        </div>
        <div class="isCheckWrap">
          <div class="nCheck">
            <div>未核验</div>
            <div>{{warnCheck.one}}</div>
          </div>
          <div class="checkNum">
            <div>已核验/预总数</div>
            <div>{{warnCheck.two}}/{{warnCheck.three}}</div>
          </div>
        </div>
        <div class="warnStatic">
          <div class="tabBox">
            <img src="../../assets/images/scan.png" alt="" class="scanImg" />
            <span :class="showType == 1 && 'cur'" @click="changeShowType(1)"
              >预警高发区域统计</span
            >
            <span
              style="margin-left: 15px"
              :class="showType == 2 && 'cur'"
              @click="changeShowType(2)"
              >预警高发时间统计</span
            >
            <img
              src="../../assets/images/titleLine.png"
              alt=""
              class="titleLine"
            />
          </div>
          <div class="staticWrap">
            <div class="staticHead">
              <li>序号</li>
              <li>区域</li>
              <li>预警数</li>
              <li>占比(%)</li>
            </div>
            <div class="staticBox">
              <div v-if="locationData.length>0">
                <div
                  class="staticItem"
                  v-for="(item, index) in locationData"
                  :key="index"
                >
                  <li>{{ index + 1 }}</li>
                  <li>{{ item.location.locationName }}</li>
                  <li>{{ item.allCount }}</li>
                  <li>
                    {{
                      Number(Math.round(item.checkedCount / item.allCount))
                        ? Number(Math.round(item.checkedCount / item.allCount))
                        : "- -"
                    }}
                  </li>
                </div>
              </div>
              <div v-else class="emptyText">暂无数据</div>
            </div>
          </div>
        </div>
        <!-- 二 -->
        <div class="statisticalCon">
          <CommonTitle titleText="预警类型 排名统计" />
          <div class="progressWrap">
            <div
              class="progressItem"
              v-for="(item, index) in progressData"
              :key="index"
            >
              <div class="topCon">
                <div class="typesCon">
                  <div class="serialNum">{{ item.alarmType.id }}</div>
                  {{ item.alarmType.alarmTypeName }}
                </div>
                <div class="num">{{ item.allCount }}</div>
              </div>
              <Progress :percent="item.checkedCount" hide-info />
            </div>
          </div>
        </div>
        <!-- 三 -->
        <div class="statisticalCon">
          <CommonTitle titleText="智能锁统计" />
          <div class="lockWrap">
            <div class="lockItem">
              <div class="lockImgBox lockImgBox1">{{intelligentLock.one}}</div>
              <p>总数</p>
            </div>
            <div class="lockItem">
              <div class="lockImgBox lockImgBox2">{{intelligentLock.two}}</div>
              <p>开启次数(次)</p>
            </div>
            <div class="lockItem">
              <div class="lockImgBox lockImgBox3">{{intelligentLock.three}}</div>
              <p>破坏次数</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间内容 -->
      <div class="cenCon">
        <div class="cenTop">
          <div class="cenLeft">
            <CommonTitle titleText="摄像头" />
            <div class="cameraAll">
              <div class="allNum">
                <div class="numPropor">{{cameraData.one}}/{{cameraData.two}}</div>
                <div class="textPropor">
                  <div class="proporLine leftCor"></div>
                  <div>总数/分布区域</div>
                  <div>total/area</div>
                </div>
              </div>
              <div class="lines"></div>
              <div class="allNum">
                <div class="numPropor">{{cameraData.three}}/{{cameraData.four}}</div>
                <div class="textPropor">
                  <div class="proporLine rightCor"></div>
                  <p>发生预警/未发生预警</p>
                  <p>happen/wasNo</p>
                </div>
              </div>
            </div>
            <div class="todayNum">
              <div class="numPropor">{{warnNum.one}}</div>
              <div class="textPropor">
                <div class="proporLine"></div>
                <div>今日预警数</div>
                <div>Early warning</div>
              </div>
            </div>
          </div>
          <!-- <img src="../../assets/images/house.png" alt="" class="houseImg"> -->
          <div class="cenRight">
            <CommonTitle titleText="智能锁" />
            <div class="cameraAll">
              <div class="allNum">
                <div class="numPropor">{{intelligentLock.one}}/{{intelligentLock.two}}/{{intelligentLock.three}}</div>
                <div class="textPropor">
                  <div class="proporLine leftCor"></div>
                  <div>总数/开启次数/破坏次数</div>
                  <div>total</div>
                </div>
              </div>
              <div class="lines"></div>
              <div class="allNum">
                <div class="numPropor">{{lockStatus.one}}/{{lockStatus.two}}/{{lockStatus.three}}/{{lockStatus.four}}</div>
                <div class="textPropor">
                  <div class="proporLine rightCor"></div>
                  <p>总数/在线/不在线（故障）/低电量</p>
                  <p>total/Online/offline/low battery</p>
                </div>
              </div>
            </div>
            <div class="todayNum">
              <div class="numPropor">{{lockStatus.five}}</div>
              <div class="textPropor">
                <div class="proporLine"></div>
                <div>违规开启数量</div>
                <div>Illegal unlocking times</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 情况切换标题 -->
        <div class="situationBox">
          <div class="tabBox">
            <img src="../../assets/images/scan.png" alt="" class="scanImg" />
            <span :class="monitorType == 1 && 'cur'" @click="changeMonitorType(1)"
              >当日站内监控情况</span
            >
            <span
              style="margin-left: 15px"
              :class="monitorType == 2 && 'cur'"
              @click="changeMonitorType(2)"
              >当日站外监控情况</span
            >
            <img
              src="../../assets/images/titleLine.png"
              alt=""
              class="titleLine"
            />
          </div>
          <div class="chartWrap">
            <!-- 扇形图表 -->
            <div class="fanChartWrap">
              <div class="chartNum">
                <div class="numBox">
                  1154 /
                  <span>2326</span>
                </div>
                <div class="textPropor">
                  <div class="proporLine leftCor"></div>
                  <div>已核验/未核验</div>
                  <div>Verified / not verified</div>
                </div>
              </div>
              <div class="fanBox">
                <div
                  style="height: 200px; width: 300px"
                  id="firstFancharts"
                ></div>
              </div>
              <div class="fanBox">
                <div
                  style="height: 200px; width: 350px;"
                  id="secondFancharts"
                ></div>
              </div>
            </div>
            <!-- 柱状图表 -->
            <div class="columChartWrap">
              <div
                style="height: 300px; width: 100%"
                id="thirdColumchart"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="rightCon">
        <div @click="handleOpenPop()">
          <CommonTitle titleText="实时预警记录" />
        </div>
        <div class="liveWrap">
          <div class="liveItem">
            <img src="../../assets/images/login-bg.jpg" alt class="liveImg" />
            <div class="liveCon">
              <div class="liveArea">
                <div class="areas">物流发货区</div>
                <div class="staCheck">
                  <img
                    src="../../assets/images/check.png"
                    alt
                    class="checkImg"
                  />未核验
                </div>
              </div>
              <div class="staText">未走人行道</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <EarlWarnRecord ref="earlWarnRecord"/>
  </div>
</template>
<script>
import {
  getStatistics,
  getLocationStatic,
  getAlarmTStatic,
  getTimeStatic,
  getSceneStatic
} from '@/api/dataNum.js'
import moment from 'moment'
import echarts from 'echarts'
import CommonTitle from './components/commonTitle.vue'
import User from './components/user/index'
import EarlWarnRecord from './early_warn_record.vue'
import './index.less'
export default {
  name: 'DataStatistics',
  components: {
    CommonTitle,
    User,
    EarlWarnRecord
  },
  data () {
    return {
      value1: '',
      titleAdsText: '华北厂' + moment().format('YYYY-MM-DD'),
      isShow: false,
      showType: 1,
      monitorType: 1,
      collapsed: false,
      curDateType: 0,
      value2: ['2012-05-25', moment().format('YYYY-MM-DD')],
      startDate: '',
      stopDate: '',
      typesNum: {},
      progressData: [],
      locationData: [],
      intelligentLock: {},
      cameraData: {},
      lockStatus: {},
      warnCheck: {},
      warnNum: {}
    }
  },
  created () {
    this.initSecondFan()
  },
  mounted () {
    this.handleOneBan()
    this.handleTwoBan()
    this.handleColumn()
    this.handleGetStatistics()
    this.handleGetAlarmTStatic()
    this.handleGetLocationStatic()
    this.initSecondFan()
  },
  methods: {
    // 警告类型统计
    handleGetAlarmTStatic () {
      getAlarmTStatic({
        startDate: this.startDate || this.value2[0],
        stopDate: this.stopDate || this.value2[1]
      }).then((res) => {
        this.progressData = res.data.alarmTypeList
      })
    },
    // 第一个饼图
    handleOneBan () {
      getAlarmTStatic({
        startDate: moment().format('YYYY-MM-DD 00:00:00'),
        stopDate: moment().format('YYYY-MM-DD 23:59:59')
      }).then((res) => {
        if (res.status === 200) {
          this.initFirstFan(res.data.alarmTypeList.splice(0, 6))
        }
      })
    },
    // 第二个饼图
    handleTwoBan () {
      getSceneStatic({
        startDate: moment().startOf('month').format('YYYY-MM-DD 00:00:00'),
        stopDate: moment().format('YYYY-MM-DD 23:59:59')
      }).then((res) => {
        if (res.status === 200) {
          this.initSecondFan(res.data.sceneAlarmCounts.splice(0, 6))
        }
      })
    },
    // 柱状图
    handleColumn () {
      getLocationStatic({
        startDate: moment().format('YYYY-MM-DD 00:00:00'),
        stopDate: moment().format('YYYY-MM-DD 23:59:59')
      }).then((res) => {
        if (res.status === 200) {
          this.initThirdColum(res.data.locationAlarm.splice(0, 5))
        }
      })
    },
    // 区域统计
    handleGetLocationStatic () {
      getLocationStatic({
        startDate: this.startDate || this.value2[0],
        stopDate: this.stopDate || this.value2[1]
      }).then((res) => {
        this.locationData = res.data.locationAlarm.splice(0, 5)
      })
    },
    // 时间统计
    handleGetTimeStatic () {
      getTimeStatic({
        startDate: this.startDate || this.value2[0],
        stopDate: this.stopDate || this.value2[1]
      }).then((res) => {
        this.locationData = res.data.alarmTimeStaticDatas.splice(0, 6)
      })
    },
    handleOpenPop () {
      this.$refs.earlWarnRecord.handleOpenPop({ pop_stu: true })
    },
    handleChange (date) {
      if (this.curDateType === 1 || this.curDateType === 2) {
        this.startDate = date
        this.stopDate = date
      } else if (this.curDateType === 0) {
        this.startDate = date[0]
        this.stopDate = date[1]
      }
    },
    changeType (num) {
      this.curDateType = num
      if (num === 1) {
        this.dateType = 'month'
      } else if (num === 2) {
        this.dateType = 'year'
      } else {
        this.dateType = 'daterange'
      }
    },
    // 分类数量统计
    handleGetStatistics () {
      getStatistics({
        st: 7, // 预警数7
        startDate: this.startDate || this.value2[0],
        stopDate: this.stopDate || this.value2[1]
      }).then((res) => {
        this.warnNum = res.data
      })
      getStatistics({
        st: 6, // 预警核验6
        startDate: this.startDate || this.value2[0],
        stopDate: this.stopDate || this.value2[1]
      }).then((res) => {
        this.warnCheck = res.data
      })
      getStatistics({
        st: 4, // 智能锁4
        startDate: this.startDate || this.value2[0],
        stopDate: this.stopDate || this.value2[1]
      }).then((res) => {
        this.intelligentLock = res.data
      })
      getStatistics({
        st: 5, // 智能锁状态5
        startDate: this.startDate || this.value2[0],
        stopDate: this.stopDate || this.value2[1]
      }).then((res) => {
        this.lockStatus = res.data
      })
      getStatistics({
        st: 3, //  摄像头3
        startDate: this.startDate || this.value2[0],
        stopDate: this.stopDate || this.value2[1]
      }).then((res) => {
        this.cameraData = res.data
      })
    },
    initFirstFan (data) {
      let arr = []
      data && data.forEach(item => {
        let obj = {
          name: item.alarmType.alarmTypeName,
          value: item.checkedCount
        }
        arr.push(obj)
      })
      let firstcharts = echarts.init(document.getElementById('firstFancharts'))
      firstcharts.clear()
      firstcharts.setOption({
        title: {
          text: '预警类型',
          // subtext: '(标准)',
          x: 'center',
          y: 'bottom',
          textStyle: {
            color: '#ffffff',
            fontWeight: '400',
            fontSize: 12
          }
        },
        color: [
          '#F1F27A',
          '#F5D15B',
          '#E17837',
          '#CD4B30',
          '#B8396E',
          '#A869E7',
          '#6366F1'
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },
        legend: {
          orient: 'vertical',
          right: 'right',
          textStyle: {
            color: '#ffffff'
          }
        },
        series: [
          {
            name: 'Radius Mode',
            type: 'pie',
            radius: [10, 70],
            center: ['28%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 3
            },
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: false
              }
            },
            data: arr
          }
        ]
      })
    },
    initSecondFan (data) {
      let arr = []
      data && data.forEach(item => {
        let obj = {
          name: item.scene.sceneName,
          value: item.alarmCount
        }
        arr.push(obj)
      })
      let secondcharts = echarts.init(
        document.getElementById('secondFancharts')
      )
      secondcharts.clear()
      secondcharts.setOption({
        legend: {
          orient: 'vertical',
          right: 'right',
          textStyle: {
            color: '#ffffff'
          }
        },
        title: {
          text: '场景',
          // subtext: '(持续学习中)',
          x: 'center',
          y: 'bottom',
          textStyle: {
            color: '#ffffff',
            fontWeight: '400',
            fontSize: 12
          }
        },
        color: [
          '#6CA7E9',
          '#93C5FD',
          '#B0D7AD',
          '#6A9B8F',
          '#315B71',
          '#33556E'
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{b}'
        },

        series: [
          {
            name: 'Radius Mode',
            type: 'pie',
            radius: [10, 70],
            center: ['20%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 3
            },
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: false
              }
            },
            data: arr
          }
        ]
      })
    },
    initThirdColum (data) {
      let xAxisData = []
      let data1 = []
      let data2 = []
      data.forEach(item => {
        xAxisData.push(item.location.locationName)
        data1.push(item.allCount - item.checkedCount)
        data2.push(item.checkedCount)
      })
      var emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0,0,0,0.8)'
        }
      }
      let thirdcharts = echarts.init(
        document.getElementById('thirdColumchart')
      )
      thirdcharts.clear()
      thirdcharts.setOption({
        legend: {
          data: ['bar2', 'bar'],
          right: '10%',
          textStyle: {
            color: '#ffffff'
          }
        },
        color: ['#9E1F20', '#178FFE'],
        tooltip: {},
        // grid: {
        //   bottom: 150
        // },
        xAxis: {
          data: xAxisData,
          axisLine: { onZero: true },
          splitLine: { show: false },
          splitArea: { show: false },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            name: '未核验',
            type: 'bar',
            stack: 'one',
            barWidth: 11,
            barGap: '60%',
            itemStyle: {
              // 柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                // 柱形图圆角，初始化效果
                barBorderRadius: [15, 15, 15, 15]
              }
            },
            emphasis: emphasisStyle,
            data: data1
          },
          {
            name: '已核验',
            type: 'bar',
            stack: 'one',
            itemStyle: {
              normal: {
                barBorderRadius: [15, 15, 0, 0]
              }
            },
            emphasis: emphasisStyle,
            data: data2
          }
        ]
      })
    },
    changeShowType (num) {
      this.showType = num
      if (num === 1) {
        this.handleGetLocationStatic()
      } else if (num === 2) {
        this.handleGetTimeStatic()
      }
    },
    changeMonitorType (num) {
      this.monitorType = num
      if (num === 1) {
        this.handleOneBan()
        this.handleTwoBan()
        this.handleColumn()
      } else if (num === 2) {
        this.handleOneBan()
        this.handleTwoBan()
        this.handleColumn()
      }
    }
  },
  watch: {
    // locationData:{
    //   handler(newVal,oldVal){
    //     this.initThirdColum (this.newVal)
    //   }
    // },
    // deep: true,
    // immediate: true
  }
}
</script>
